export const createResponsiveStyles = (deviceInfo: {
  width: number
  height: number
  isTablet: boolean
  isSmallPhone: boolean
  isLargePhone: boolean
  orientation: "portrait" | "landscape"
}) => {
  const { width, isTablet, isSmallPhone, orientation } = deviceInfo

  // 基础间距
  const spacing = {
    xs: isSmallPhone ? 4 : 8,
    sm: isSmallPhone ? 8 : 12,
    md: isSmallPhone ? 12 : 16,
    lg: isSmallPhone ? 16 : 24,
    xl: isSmallPhone ? 24 : 32,
    xxl: isSmallPhone ? 32 : 48,
  }

  // 字体大小
  const fontSize = {
    xs: isSmallPhone ? 10 : 12,
    sm: isSmallPhone ? 12 : 14,
    md: isSmallPhone ? 14 : 16,
    lg: isSmallPhone ? 16 : 18,
    xl: isSmallPhone ? 20 : 24,
    xxl: isSmallPhone ? 24 : 32,
    title: isSmallPhone ? 32 : isTablet ? 56 : 48,
  }

  // 组件尺寸
  const sizes = {
    button: isSmallPhone ? 40 : 48,
    input: isSmallPhone ? 40 : 48,
    card: isSmallPhone ? 12 : 16,
    header: isSmallPhone ? 24 : 32,
  }

  // 网格列数
  const gridCols = {
    stats: isTablet ? 4 : isSmallPhone ? 1 : 2,
    devices: isTablet ? 3 : 1,
    projects: isTablet ? 3 : 1,
  }

  // 容器宽度
  const containerPadding = isTablet ? spacing.xxl : spacing.lg

  return {
    spacing,
    fontSize,
    sizes,
    gridCols,
    containerPadding,
    isLandscape: orientation === "landscape",
  }
}
